<script lang="ts">
/**
 * @author leo
 * @description #19513 统计栏目
 * @param num 数量
 * @param flow 流量
 * @param storage 存储空间
 */
import { Component, Vue, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class TotalCard extends Vue {
  @Prop({ default: 0 }) public num!: number; // 数量
  @Prop({ default: 0 }) public flow!: number; // 流量
  @Prop({ default: 0 }) public storage!: number; // 存储空间
}
</script>

<template>
  <div class="total_group">
    <div class="total_group-list">
      <p class="total_group-list_title">已上传数</p>
      <p class="total_group-list_con">
        <span>{{num}}</span>个
      </p>
    </div>
    <div class="total_group-list">
      <p class="total_group-list_title">被点击次数</p>
      <p class="total_group-list_con">
        <span>{{flow}}</span>次
      </p>
    </div>
    <div class="total_group-list">
      <p class="total_group-list_title">存储空间</p>
      <p class="total_group-list_con">
        已使用
        <span>{{storage}}</span>GB
      </p>
    </div>
  </div>
</template>

<style lang="less">
.total_group {
  position: relative;
  padding: 10px 0;
  background: #f8f8f8;
  margin-bottom: 15px;
  font-size: 12px;
  display: flex;
}
.total_group-list {
  position: relative;
  padding: 10px 20px 10px 35px;
  border-right: 1px solid #e5e5e5;
  box-sizing: border-box;
  &:last-child {
    border-right: none;
  }
  &:nth-child(1) {
    flex-basis: 20%;
  }
  &:nth-child(2) {
    flex-basis: 40%;
  }
  &:nth-child(3) {
    flex-basis: 40%;
  }
}
.total_group-list_con {
  margin-top: 10px;
  span {
    font-size: 20px;
    font-weight: 400;
    vertical-align: baseline;
  }
}
</style>